<template>
	<el-dialog v-model="dialogVisible" :title="isAdd ? '新增题目' : '修改题目'" @close="onClose" :close-on-click-modal='false'>
		<el-form :model="data.form" :rules="rules" ref="ruleFormRef">
			<el-form-item label="题目" :label-width="formLabelWidth" prop="title"><el-input type="textarea" v-model="data.form.title" placeholder="题目" /></el-form-item>
			<el-form-item label="关键字" :label-width="formLabelWidth" prop="keyword">
				<el-input type="textarea" v-model="data.form.keyword" placeholder="关键字"></el-input>
			</el-form-item>
			<el-form-item label="答案" :label-width="formLabelWidth" prop="result">
				<el-input type="textarea" v-model="data.form.result" placeholder="答案"></el-input>
			</el-form-item>
			<el-form-item label="重要程度" :label-width="formLabelWidth" prop="importance">
				<el-radio-group v-model="data.form.importance">
					<el-radio label="一般" size="small"/>
					<el-radio label="普通" size="small"/>
					<el-radio label="正常" size="small"/>
					<el-radio label="重要" size="small"/>
					<el-radio label="很重要" size="small"/>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="关键字比例" :label-width="formLabelWidth" prop="keywordRadio">
				<el-input-number v-model="data.form.keywordRadio" :min="1" :max="100" placeholder="得分占比"/>
			</el-form-item>
			<el-form-item label="类型" prop="type" :label-width="formLabelWidth">
				<el-select v-model="data.form.type" placeholder="类型">
					<el-option v-for="item in learnType" :key="item.id" :label="item.name" :value="item.id"></el-option>
				</el-select>
			</el-form-item>
		</el-form>
		<!-- role_name,user_code,user_name,password,phone,email,qq,note,role_id -->
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import md5 from 'js-md5';
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
import { useMainStore } from '@/store/index.js';
import { storeToRefs } from 'pinia';
import {ref} from 'vue'
//请求
const { proxy } = getCurrentInstance();
import { getCurrentInstance} from 'vue';

//dialogSend hook
import hook from '@/hooks/useDialogSend';
const {open,data,isAdd,ruleFormRef,formLabelWidth,dialogVisible} = hook;
const emits = defineEmits(['closeDialog'])
defineExpose({ open });


//引入piana
const mainStore = useMainStore();
const { learnType } = storeToRefs(mainStore);

// title, type, keyword, result, importance, keywordRadio
const rules = {
	title: [{ required: true, message: '请输入题目', trigger: 'blur' }],
	type: [{ required: true, message: '请选择类型', trigger: 'blur' }],
	keyword: [{ required: true, message: '请输入关键字', trigger: 'blur' }],
	result: [{ required: true, message: '请输入答案', trigger: 'blur' }],
	importance: [{ required: true, message: '请输入', trigger: 'blur' }],
	keywordRadio: [{ required: true, message: '请输入关键字分数占比', trigger: 'blur' }],
};

const submitForm = async (formEl: FormInstance | undefined) => {
	console.log(formEl);
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
		let bool = !!data.form.id
		let url = bool?'/topic/update':'/topic/add'
		let params = {...data.form}
		console.log(params);
      proxy
      	.$post(url,params)
      	.then(res => {
			console.log(res);
      		if(res.code===200){
				ElMessage({
				  message: bool?'修改成功':'添加成功',
				  type: 'success',
				})
				onClose(true)
			}
      	});
    } else {
      console.log('error submit!', fields)
    }
  })
}

function onClose(bool){
	emits('closeDialog',bool)
	dialogVisible.value = false
	data.form = {}
}


</script>

<style scoped lang="less"></style>
